<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
    <title></title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
      rel="stylesheet"
    />

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.23/dayjs.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
  </head>
  <body>
    <div id="app">
      <v-app id="inspire">
        <v-app-bar app clipped-left :color="appBarColor">
          <v-toolbar-title style="color: white;">环境监控系统</v-toolbar-title>
          <v-spacer></v-spacer>
          <span style="color: white;">状态：{{onlineStatus}}</span>
        </v-app-bar>

        <v-content>
          <v-container fluid>
            <!-- <v-layout align-center justify-center>
							<v-flex shrink>
								服务状态：在线
							</v-flex>
						</v-layout> -->
            <v-row dense>
              <v-col cols="12">
                <v-card color="#385F73" dark>
                  <v-card-title class="headline">当前时间</v-card-title>
                  <v-card-text>
                    <h2>{{thisTime}}</h2>
                  </v-card-text>
                </v-card>
              </v-col>
              <v-col v-for="(item, i) in items" :key="i" cols="12">
                <v-card :color="item.color" dark>
                  <div class="d-flex flex-no-wrap justify-space-between">
                    <div>
                      <v-card-title
                        class="headline"
                        v-text="item.title"
                      ></v-card-title>
                      <v-card-subtitle
                        v-text="'当前状态：'+currentStatus[i]"
                      ></v-card-subtitle>
                      <v-card-text
                        v-text="'最近一次上报异常时间：'+lastErrorTime[i]"
                      ></v-card-text>
                    </div>
                    <v-avatar class="ma-3" size="125" tile>
                      <v-img :src="item.src"></v-img>
                    </v-avatar>
                  </div>
                </v-card>
              </v-col>
              <v-col cols="12">
                <v-card color="white" dark>
                  <div
                    class="d-flex flex-no-wrap justify-space-between"
                    ref="ecDiv"
                    style="text-align: center;"
                  >
                    <!-- <div>
											<v-card-title class="headline">关于</v-card-title>
											<v-card-subtitle>新疆xx大学 xxx系 2020届</v-card-subtitle>
											<v-card-text>Kris Wu</v-card-text>
											<v-card-text>mail: 873906496@qq.com</v-card-text>
										</div> -->
                    <div id="main" :style="echartsStyle"></div>
                  </div>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-content>
        <v-footer app>
          <span>&copy; 2020 信息工程学院 吴一凡</span>
        </v-footer>
      </v-app>
    </div>

    <script>
      let BASE_URL = "http://101.200.82.120" + ":9999";
      let vm = new Vue({
        el: "#app",
        vuetify: new Vuetify({
          theme: {
            dark: false,
          },
        }),
        data: {
          thisTime: "",
          appBarColor: "blue",
          onlineStatus: "在线",
          lastErrorTime: ["-", "-"],
          currentStatus: ["-", "-"],
          echartsStyle: {
            height: 600 + "px",
            width: 600 + "px",
          },
          items: [
            {
              color: "#1F7087",
              src:
                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1394869274,1082291&fm=26&gp=0.jpg",
              title: "有毒烟雾检测",
            },
            {
              color: "#952175",
              src:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586254826221&di=0cd212aa1b1bf1cdb696f0bb250b5886&imgtype=0&src=http%3A%2F%2Fimgtianqi.eastday.com%2Fres%2Fupload%2Fue%2Fimage%2F20170813%2F1502596732209159.png",
              title: "环境温度检测",
            },
          ],
          option: {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: [
                "00:00",
                "01:00",
                "02:00",
                "03:00",
                "04:00",
                "05:00",
                "06:00",
                "07:00",
                "08:00",
                "09:00",
                "10:00",
                "11:00",
                "12:00",
                "13:00",
                "14:00",
                "15:00",
                "16:00",
                "17:00",
                "18:00",
                "19:00",
                "20:00",
                "21:00",
                "22:00",
                "23:00",
              ],
            },
            yAxis: {
              type: "value",
              axisPointer: {
                snap: true,
              },
            },
            series: [
              {
                name: "烟雾报警持续时间（秒）",
                type: "line",
                smooth: true,
                data: [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                ],
              },
              {
                name: "温度报警持续时间（秒）",
                type: "line",
                smooth: true,
                data: [
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                  0,
                ],
              },
            ],
          },
        },
        mounted() {
          this.echartsStyle.width = this.$refs.ecDiv.offsetWidth + "px";
          setInterval(() => {
            this.thisTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
          }, 1000);
          setInterval(() => {
            // 调用接口，失败返回服务离线
            this.getSensorData();
          }, 1000);
          setTimeout(() => {
            let myChart = echarts.init(document.getElementById("main"));
            myChart.setOption(this.option);
          }, 100);
          this.getSensorData();
        },
        methods: {
          getSensorData: function () {
            fly
              .get(BASE_URL + "/getTodaySensorData")
              .then((response) => {
                if (response.data.code === 0) {
                  this.onlineStatus = "在线";
                  let tmpseries = [
                    {
                      name: "烟雾报警持续时间（秒）",
                      type: "line",
                      smooth: true,
                      data: [
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                      ],
                    },
                    {
                      name: "温度报警持续时间（秒）",
                      type: "line",
                      smooth: true,
                      data: [
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                      ],
                    },
                  ];
                  this.option.series = tmpseries;
                  let tempSensorData = response.data.data.tempSensorData;
                  let smokeSensorData = response.data.data.smokeSensorData;
                  let tempTimeFlag = 0;
                  let smokeTimeFlag = 0;
                  let todayDate = new Date().getDate();
                  if (smokeSensorData.length !== 0) {
                    smokeSensorData[0].dataValue === 0
                      ? (this.currentStatus[0] = "空气正常")
                      : (this.currentStatus[0] = "有毒气体密度超过阈值");
                  }
                  if (tempSensorData.length !== 0) {
                    this.currentStatus[1] = tempSensorData[0].dataValue;
                    tempSensorData[0].dataValue === 0
                      ? (this.currentStatus[1] = "温度正常")
                      : (this.currentStatus[1] = "环境温度超过阈值");
                  }
                  for (let i = 0; i < smokeSensorData.length; i++) {
                    if (smokeTimeFlag === 0) {
                      if (smokeSensorData[i].dataValue === 1) {
                        this.lastErrorTime[0] = dayjs(
                          smokeSensorData[i].postTime
                        ).format("YYYY-MM-DD HH:mm:ss");
                        smokeTimeFlag = 1;
                      }
                    }
                    if (smokeSensorData[i].dataValue === 1) {
                      let tmpTime = new Date(smokeSensorData[i].postTime);
                      if (tmpTime.getDate() === todayDate) {
                        this.option.series[0].data[tmpTime.getHours()] += 1;
                      }
                    }
                  }
                  for (let i = 0; i < tempSensorData.length; i++) {
                    if (tempTimeFlag === 0) {
                      if (tempSensorData[i].dataValue === 1) {
                        this.lastErrorTime[1] = dayjs(
                          tempSensorData[i].postTime
                        ).format("YYYY-MM-DD HH:mm:ss");
                        tempTimeFlag = 1;
                      }
                    }
                    if (tempSensorData[i].dataValue === 1) {
                      let tmpTime = new Date(tempSensorData[i].postTime);
                      if (tmpTime.getDate() === todayDate) {
                        this.option.series[1].data[tmpTime.getHours()] += 1;
                      }
                    }
                  }
                  setTimeout(() => {
                    let myChart = echarts.init(document.getElementById("main"));
                    myChart.setOption(this.option);
                  }, 100);
                }
              })
              .catch((error) => {
                console.log(JSON.stringify(error));
                this.onlineStatus = "服务异常";
              });
          },
        },
      });
    </script>
  </body>
</html>
